<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: snzo.chen
 * @Date: 2023-11-16 15:01:18
 * @LastEditors: snzo.chen
 * @LastEditTime: 2023-12-14 15:56:24
-->
<template>
  <ActionTable :showBack="false" :showAdd="false">
    <div class="screen-box">
      <a-form ref="screenFormRef" layout="inline" :model="screenData">
        <a-form-item name="realName">
          <a-input v-model:value="screenData.realName" placeholder="姓名" />
        </a-form-item>
        <a-form-item name="phone">
          <a-input v-model:value="screenData.phone" placeholder="电话" />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="screenHandleSubmit">搜索</a-button>
        </a-form-item>
        <a-form-item>
          <a-button @click="resetScreenForm">重置</a-button>
        </a-form-item>
      </a-form>
    </div>
  </ActionTable>
  <a-table
    :columns="columns"
    :row-key="(record) => record.id"
    :data-source="checkerOfData"
    :pagination="state.pagination"
    :loading="state.loading"
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'module'">
        <a-tag v-for="item in record.moduleArr">{{ getModuleInfo(item) }}</a-tag>
      </template>
      <template v-if="column.key === 'action'">
        <TableRowAction
          @subItem="showModal(record)"
          :selText="'授权'"
          :showEdit="false"
          :showDel="false"
        />
      </template>
    </template>
  </a-table>
  <contextHolder />
</template>
<script lang="ts" setup>
import { TableProps, Modal, message as $message } from "ant-design-vue";
import { h, onMounted, reactive, ref } from "vue";
import { paginationToQuery, proxyFilterEmptyValues } from "@/utils/common";
import { useRoute } from "vue-router";
import {
  selectAllChecker,
  selectCheckerByExample,
  updateTicketChecker,
} from "@/api/user/checker";
import { getModuleInfo } from "./checkerModule";
import AuthChecker from "./auchChecker.vue";
const route = useRoute();
const [modal, contextHolder] = Modal.useModal();
const ticketMenuType = ref("user");
const childRef = ref();
const screenFormRef = ref();
const columns = [
  {
    dataIndex: "id",
    title: "ID",
    key: "id",
    align: "center",
  },
  {
    dataIndex: "realName",
    title: "姓名",
    key: "realName",
    align: "center",
  },
  {
    dataIndex: "phone",
    title: "电话",
    key: "phone",
    align: "center",
  },
  {
    dataIndex: "module",
    title: "核销模块",
    key: "module",
    align: "center",
  },
  {
    dataIndex: "createTime",
    title: "注册时间",
    key: "createTime",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
  },
];
const checkerOfData = ref<API.CheckerItem[]>([]);

const state = reactive({
  loading: true,
  // checkerOfData: <API.CheckerItem>[],
  pagination: {
    pageSize: 10,
    current: 1,
    total: 0,
    showTotal: (total) => `总${total}条`,
  },
});

const screenData = reactive<API.UserItem>({
  realName: "",
  idCard: "",
  phone: "",
  stk: "",
});

const loadData = async () => {
  const { seachList, seachTotal } = await selectAllChecker(
    paginationToQuery(state.pagination)
  );
  const newSeachList = seachList.filter((item) => {
    return (item.moduleArr = item.module?.split(","));
  });
  checkerOfData.value = newSeachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

const handleTableChange: TableProps["onChange"] = (page) => {
  state.pagination.current = page.current!;
  loadData();
};

/**
 * 创建弹窗
 * @param type
 * @param data
 */
const showModal = (data?: any) => {
  const authCheckerSlot = () =>
    h(AuthChecker, {
      ref: childRef,
      moduleArr: data.module !== "0" ? data.moduleArr : [],
    });
  modal.confirm({
    title: "授权模块",
    icon: null,
    closable: true,
    okText: "确定",
    cancelText: "取消",
    content: authCheckerSlot,
    async onOk() {
      const authModule = childRef.value.state.checkedList;
      console.log("authModule", authModule);
      const params = {
        id: data.id,
        module: authModule.length > 0 ? authModule.toString() : 0,
      };
      const { msg } = await updateTicketChecker(params);
      msg === "success"
        ? ($message.success("操作成功"), loadData())
        : $message.error(msg);
    },
    onCancel() {
      Modal.destroyAll();
    },
  });
};

/**
 * 筛选
 */
const screenHandleSubmit = async () => {
  state.loading = true;
  const { seachList, seachTotal } = await selectCheckerByExample(
    proxyFilterEmptyValues(screenData),
    { pageNum: 1, pageSize: 999 }
  );
  const newSeachList = seachList.filter((item) => {
    return (item.moduleArr = item.module?.split(","));
  });
  checkerOfData.value = newSeachList;
  state.pagination.total = seachTotal;
  state.loading = false;
};

/**
 * 重置筛选表单
 */
const resetScreenForm = () => {
  screenFormRef.value.resetFields();
};

onMounted(() => {
  ticketMenuType.value = route.query.type as string;
  loadData();
});
</script>
